<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 圆角带刻度仪表图样式1
 * @FilePath: \web-ems\src\component\tableChart\src\chartlinebar.vue
-->
<template>
 <div><a-empty v-if="seriesData.length==0"></a-empty></div>
  <div 
    :style="[{ width: width, height: chartHeight, overflow: 'hidden' }]"
    ref="echartref"
  ></div>  
 
</template>

<script>
import * as echarts from "echarts";

import { onMounted,onUpdated, toRefs, ref, reactive, watch, computed } from "vue";
import { resetChartStyle, showLoading } from "@/core/tools/common";
import { useStore } from "vuex";
export default {
  //echartsInstance = null,
  props: {
    titleName: {
      type: String,
      default: "多维曲线",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    isStack: {
      type: Boolean,
      default: false,
    },
    legendData: {
      type: Array,
      default: [ 
      ],
    },
    xAxisData: {
      type: Array,
      default: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    fontSize: {
      default: 12,
      type: Number,
    },
    color: {
      type: Array,
      default: ["#1F9EFF", "#1BC85E", "#FFC107", "#FF6C6B"],
    },
    seriesData: [],
  },
  emits: ["imgurl"],
  setup: function (props, { emit }) {
    let chartInstance = null; //折线不能用响应式接收echart

    const store = useStore();
    const themeColors = reactive({
      font: "#fff",
      bg:"#101638"
    });

    themeColors.font = computed(() => {
      if (store.getters.theme == "theme-night") {
        return "#fff";
      } else {
        return "#000";
      }
    });

    themeColors.bg = computed(() => {
      if (store.getters.theme == "theme-night") {
        return "#101638";
      } else {
        return "#fff";
      }
    });

    const theme = computed(() => store.getters.theme);
    watch(theme, (newtheme, oldInfo) => {
      f_echartInit(chartInstance);
      chartInstance.resize();
    });

    /*监听props*/
    watch(props, (newProps, oldProps) => { 
      
      f_echartInit(chartInstance); 
      chartInstance.resize();
    },{
      deep:true
    });

    window.addEventListener("resize", function () {
      chartInstance.resize();
    });

    let state = reactive({
      echartref: ref(),
      chartInit: "",
      chartHeight:"",
    });
 
    const f_echartInit = (chartdom) => {
      // 指定图表的配置项和数据
      /* ------------------begin------------------ */
      const option = { 
        animation: false,
        color: props.color,
        title: {
          text: props.titleName,
          textStyle: {
            color: themeColors.font,
            fontSize: props.fontSize,
            textAlign: "center",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: props.legendData,
          textStyle: {
            color: themeColors.font,
            fontSize: props.fontSize,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false,
            },
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: props.xAxisData,
          axisLabel: {
            fontSize: props.fontSize,
          },
        },
        yAxis: [
          {
            type: "value",
            splitNumber: 4,
            //坐标轴内线的样式
            splitLine: {
              lineStyle: {
                color: "rgba(112,112,112,0.5)",
                type: "dashed", //虚线
              },
            },
            axisLabel: {
              fontSize: props.fontSize,
            },
          },
        ],
        textStyle: {
          color: themeColors.font,
          fontSize: props.fontSize,
        },
        series: [],
      };

      for (let i = 0; i < props.legendData.length; i++) {
        let obj = {};

        let dataIndex = props.legendData[i]["key"];

        obj["name"] = props.legendData[i]["name"];
        if (obj["name"].indexOf("cost") != -1) {
          obj["type"] = "bar";
          obj["barWidth"] = "20px";
          obj["yAxisIndex"] = 1;
          if (option.yAxis.length == 1) {
            option.yAxis.push({
              type: "value",
              name: "费用",
              splitNumber: 4,
              position: "right",
              //坐标轴内线的样式
              splitLine: false,
              axisLabel: {
                fontSize: props.fontSize,
              },
            });
          }
        } else {
          obj["yAxisIndex"] = 0;
          obj["type"] = "line";
          obj["smooth"] = 0.5;
          obj["symbol"] = "none";
        }

        obj["data"] = props.seriesData[dataIndex];

        option.series.push(obj);
      }

      chartdom.setOption(option); 
      chartdom.hideLoading();
      let imgurl = chartdom.getDataURL({
        pixelRatio: 1.5,
        type: "png",
        backgroundColor: themeColors.bg,
      });
      emit("imgurl", imgurl);
    };
    //挂载
    onMounted(() => {
      state.chartHeight = state.echartref.offsetWidth * 0.7 +'px'
      chartInstance = echarts.init(state.echartref);
      chartInstance.showLoading(showLoading());
      f_echartInit(chartInstance);
    });
    onUpdated(() => {
      chartInstance.resize()
    })
    return {
      ...toRefs(state), 
    };
  },
};
</script>

<style>
</style>
